<template>
  <div>BComponent</div>
  <p>{{ count }}</p>
  <button @click="update">更新</button>

  <p>{{ formData.name }} - {{ formData.age }}</p>
  <p>{{ text }}</p>
  <p>{{ sex }}</p>

  <Child />
</template>

<script lang="ts">
import { defineComponent } from "vue";

// 为了给组件取名称，将来能在vue开发者调试工具中显示
export default defineComponent({
  name: "BComponent",
});
</script>

<script lang="ts" setup>
// setup语法糖
import { ref, reactive, watch, computed, onMounted, useAttrs } from "vue";
import Child from "./Child.vue"; // 引入就会自动注册组件

// 未通过props声明接受的其他属性
const attrs = useAttrs();

// 不用引入，可以直接使用
// 声明接受props
const props = defineProps<{
  sex: string; // 是ts类型
}>();

// 声明接受自定义事件
// 返回值emit是一个函数，用来触发自定义事件
const emit = defineEmits(["say"]);

onMounted(() => {
  console.log("onMounted触发了");
  console.log(props.sex); // 读取props数据
  emit("say"); // 触发自定义事件
  console.log(attrs);
});

const formData = reactive({
  name: "jack",
  age: 18,
});

// 定义即暴露
const count = ref(0);

const update = () => {
  count.value++;
};

const text = computed(() => {
  return count.value + "次";
});

watch(count, (newVal, oldVal) => {
  console.log("count的变化了", newVal, oldVal);
});
</script>

<style></style>
